import React, { useState, useEffect } from 'react'
import { Table, Tag, Space, Button, Modal, Popover, Switch } from 'antd'
import { DeleteTwoTone, EditTwoTone, ExclamationCircleFilled } from '@ant-design/icons';

import axios from 'axios';
import { useNavigate } from 'react-router-dom';
export default function RightList() {
    const { confirm } = Modal;
    const navigate = useNavigate()

    const [loading, setLoading] = useState(true)
    const showDeleteConfirm = () => {
        confirm({
            title: '删除',
            icon: <ExclamationCircleFilled />,
            content: '你确定要删除吗？',
            okText: '确定',
            okType: 'danger',
            cancelText: '取消',
            onOk() {
                console.log('OK');
            },
            onCancel() {
                console.log('Cancel');
            },
        });
    };

    const handleMenuData = (data) => {
        for (var i = 0; i < data.length; i++) {
            var item = data[i]
            if (item.children) {
                if (item.children.length === 0) {
                    item.children = undefined;
                } else {
                    handleMenuData(item.children)
                }
            }

        }
        return data;
    }

    const [list, setList] = useState([])
    useEffect(() => {
        axios.get("http://192.168.2.3:3000/rights?_embed=children")
            .then(res => {
                //处理返回数据， 如果children是空就不加该key
                setList(handleMenuData(res.data));
                setLoading(false)
            });
        return () => { }
    }, []);
    const switchChange = (record) => {
        console.log("switch is changed", record)
        const value = record.pagepermisson === 1 ? 0 : 1
        axios.patch(`http://192.168.2.3:3000/rights/${record.id}`,
            { pagepermisson: value }).then(res => {
                console.log(res)
                axios.get("http://192.168.2.3:3000/rights?_embed=children")
                    .then(res => {
                        //处理返回数据， 如果children是空就不加该key
                        setList(handleMenuData(res.data));
                        setLoading(false)
                    });
            });


    }


    const columns = [
        {
            title: 'ID',
            dataIndex: 'id',
            key: 'id',
            render: (text) => <a>{text}</a>,
        },
        {
            title: '权限名称',
            dataIndex: 'label',
            key: 'label',
        },

        {
            title: '权限路径',
            key: 'key',
            dataIndex: 'key',
            render: (_, { key }) => (
                <>
                    {

                        <Tag color="gold" key={key}>
                            {key}
                        </Tag>

                    }
                </>
            ),
        },
        {
            title: '是否启用',
            dataIndex: 'pagepermisson',
            key: 'pagepermisson',
            render: (_, { pagepermisson }) => (
                <>
                    {

                        <Tag color="blue" key={pagepermisson}>
                            {pagepermisson === undefined ? pagepermisson
                                : pagepermisson === 1 ? 'true'
                                    : 'false'}
                        </Tag>

                    }
                </>
            )
        },
        {
            title: '操作',
            key: 'action',
            render: (_, record) => (
                <Space size="middle">

                    <Button
                        type='link'
                        onClick={showDeleteConfirm}
                        danger
                        shape="circle" icon={<DeleteTwoTone twoToneColor="#eb2f96" />} />
                    <Popover
                        content={< Switch
                            checked={record.pagepermisson}
                            onChange={() => { switchChange(record) }}
                        />}
                        title="菜单配置项"
                        trigger={record.pagepermisson === undefined ? '' : 'click'}>
                        <Button
                            type='primary'
                            shape="circle"
                            icon={<EditTwoTone />}
                            disabled={record.pagepermisson === undefined}
                        />
                    </Popover>

                </Space >
            ),
        },
    ];




    return (
            <Table columns={columns}
                dataSource={list}
                pagination={false}
                loading={loading} />
    )
}
